<template>
  <div class="login-con">
    <div class="contain flex">
      <div class="imgbox bg-blue-50">
        <el-image :src="loginImg" :fit="'cover'"></el-image>
      </div>
      <div class="formbox flex justify-center">
        <div class="form flex flex-col items-center">
          <div class="logo">
            <el-image :src="logoImg" :fit="'cover'"></el-image>
          </div>
          <h1 class="title text-font-color">登录</h1>
          <div class="box">
            <div class="input-box">
              <input type="text" placeholder="请输入您的账号" v-model="user.username" />
              <el-input v-model="user.password" placeholder="请输入您的密码" show-password></el-input>

            </div>
            <div class="verify-code " >
              <input v-model="verifyCodeInput" placeholder="验证码" >
              </input>
               <div class="code-box">
                <div class="code">
                  <span  class="num" v-for="(item,index) in verifyCode" :key="index">
                    {{ item }}
                  </span>
                  <div class="hr"></div>
                </div>
                <div class="code-text text-sm" @click="getVerifyCode">更换验证码</div>
              </div>
            </div>

            <div class="tip">
              <span class="text-red-700">{{ loginTip }}</span>
            </div>
            <div class="button">
              <button class="rounded-xl" @click="checkLogin()">登录</button>
            </div>
          </div>
          <div>没有账号?
            <button class="text-blue-500" @click="toGister()">
              立即注册
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { symlinkSync } from 'fs';

export default {
  data() {
    return {
      loginImg: require("@/image/swiper-01.jpg"),
      logoImg: require("@/image/logo.png"),
      user: {
        username: "",
        password: "",
      },
      loginTip: "",
      verifyCodeInput:"",
      verifyCode:"",
    };
  },
  methods: {
    //获取验证码
    getVerifyCode(){
        this.$axios.postInfo("/getVerifyCode").then( res =>{
          this.verifyCode=res.verifyCode
        })
    },
    checkoutVerifyVode(){
      if(this.verifyCodeInput.toUpperCase()=== this.verifyCode)
        return true;
      return false;
    },
    //登录验证
    checkLogin() {
      if(this.user.username==""){
        this.loginTip = "用户名不能为空"
      }else if(this.user.password==""){
        this.loginTip = "用户名不能为空"
      }else if(this.verifyCodeInput==""||this.verifyCodeInput==undefined){
        this.loginTip="验证码为空";
      }else if(!this.checkoutVerifyVode()){
        this.loginTip="验证码错误";
        this.getVerifyCode()
      }else{
        this.$taxios.getLogin(this.user).then((res => {
        this.loginTip = res.state
        if (res.state == 0) {
          this.loginTip = "用户名或者密码错误"
        } else {
          this.loginTip = ""
          let user = res
          this.$store.commit("setUserToken",res.token)
          this.$message.promptBox("登录成功","success");
          this.$router.replace("/mine")
        }
      }))
      console.log(this.loginTip)
      }
     
    },
    toGister() {
      this.$router.replace("/register")
    },

  },
  created(){
    this.getVerifyCode()
  }
};
</script>
<style lang='less' scoped>
.login-con {
  margin-top: 70px;
  background: #fbfbfb;

  .contain {
    height: calc(100vh);

    .imgbox {
      width: 40%;

      .el-image {
        height: 100%;
      }
    }

    .formbox {
      position: relative;
      width: 60%;

      .form {
        position: relative;
        width: 80%;
        padding: 1rem;
        padding-top: 6rem;

        .logo {
          height: 50px;

          .el-image {
            height: 100%;
          }
        }

        .box{
          display: block;
          width: 100%;
          max-width: 400px;
        }

        .title {
          text-align: left;
          font-size: 20px;
          font-weight: 700;
          padding: 1rem 0;
          text-indent: 0;
        }

        .input-box {
          display: flex;
          flex-direction: column;

          /deep/ input {
            margin: 1rem 0;
            padding: 0 1rem;
            height: 45px;
            max-width: 400px;
            line-height: 45px;
            display: inline-block;
            outline: none;
            border: none;
            background: transparent;
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 0%;
          }
        }

        .verify-code {
          display: flex;
          input {
            margin: 1rem 0;
            padding: 0 1rem;
            height: 45px;
            max-width: 400px;
            line-height: 45px;
            display: inline-block;
            outline: none;
            border: none;
            background: transparent;
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 0%;
          }
          .code-box {
            flex: 1;
            .code {
              position: relative;
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 45px;
              background: rgba(128, 128, 128, 0.519);
              overflow: hidden;
              span {
                width: 100%;
                text-align: center;
              }
              .num:nth-child(n) {
                transform: rotate(25deg);
                @apply text-red-500;
              }
              .num:nth-child(2n) {
                transform: rotate(-25deg);
                @apply text-blue-500;
              }
              .hr {
                position: absolute;
                height: 1px;
                background: black;
                width: 100%;
              }
            }
            .code-text {
              cursor: pointer;
            }
          }
        }

        .tip {
          text-align: left;
        }

        .button {
          text-align: left;

          button {
            margin: 1rem 0;
            width: 100%;
            height: 45px;
            max-width: 400px;
            color: white;
            background: linear-gradient(90deg, #649aff, #1a5be6b0);
          }
        }
      }
    }
  }
}
</style>